﻿html{
    font-size:20px;
}
body {
    height: 100vh;
    width:100vw;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    line-height:2rem;
}

ul {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 0;
}


table{
    border-collapse:collapse;
}
th,td {
    height:1.5rem;
    border:1px black solid;
}
input{
    border:0;
    outline:none;
    border-bottom:1px groove black;
    font-size:1rem;
}

.btn {
    background-color: #57d131;
    border-radius: 5rem;
    text-align: center;
    padding:0.5rem;
}
    .btn::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: var(--x,0);
        top: var(--y,0);
        pointer-events: none;
        background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: translate(-50%,-50%) scale(10);
        opacity: 0;
        transition: transform .3s, opacity .8s;
    }

    .btn:not([disabled]):active::after {
        transform: translate(-50%,-50%) scale(0);
        opacity: .3;
        transition: 0s;
    }
